<template>
    <div class="btns">
        <ul>
            <li class="btnOne" v-for = "(item, index) of btnList" :key="index">
                <div class="btnName lf" :class="item.backG">{{item.name}}</div>
            </li>
           
        </ul>
    </div>
</template>
<script>
export default {
    name: 'CommonControlBtn',
    data(){
        return{
            isOnOff : false,
            isIndex : -1,
            btnList: [
                {name:'特别清新', backG : 'one', seen: false, level: '-I-'},
                {name:'清新', backG : 'two', seen: false, level: '-II-'},
                {name:'较清新', backG : 'three', seen: false, level: '-III-'},
                {name:'一般', backG : 'four', seen: false, level: '-IV-'},
                {name:'不清新', backG : 'five', seen: false, level: '-VI-'}
            ]
        }
    }
}
</script>
<style lang="stylus" scoped> 
    @import '../../../assets/styles/varibles.styl'
    .btns
        position:absolute
        z-index:1
        left:4.26rem
        top:7.96vh
        font-size:.14rem
        color:white
        ul
            li
                margin-bottom:7px
                height: 19px
                .btnName
                    width:58px
                    text-align :center
                    line-height:19px
                .one
                    background:  $bg1
                .two
                    background:  $bg2
                .three
                    background:  $bg3
                .four
                    background:  $bg4
                .five
                    background:  $bg5
        .btn
            width: 30px
            height: 14px
            background: #59E1FE
            margin-left:10px
            margin-top:2px
            border-top-left-radius:10px    
            border-top-right-radius:10px 
            border-bottom-left-radius:10px
            border-bottom-right-radius:10px
            overflow :hidden
            .onOff
                width:12px
                height: 12px
                float: right
                background: #fff
                margin-top: 1px
                margin-left: 1px
                margin-right: 1px
                border-radius: 50%
        .onOffActive
            background:#707070
            .onOffG
                float:left
</style>


